<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模块管理</title>
		<script src="../js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="../js/layui/layui.js"></script>
		<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
	</head>
	<body>
		<!-- 添加模块 -->
		<div id="addModuleTree" style="display: none">
			<form class="layui-form" id="my_question">
				<div class="layui-form-item">
					<label class="layui-form-label">父模块Id</label>
					<div class="layui-input-inline">
						<input type="text" id="addParentId" name="" disabled="disabled" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">模块名称</label>
					<div class="layui-input-inline">
						<input type="text" id="addname" name=""autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">路径</label>
					<div class="layui-input-inline">
						<input type="text" id="addpath" name=""autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">权重</label>
					<div class="layui-input-inline">
						<input type="text" id="addweight" name=""autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="button" class="layui-btn layui-btn-warm" onclick="saveAddModules()">保存</button>
					</div>
				</div>
			</form>
		</div>
		<!-- 显示树形模块 -->
		    <div style="height: 100%">
		        <div style="height: 100%">
		            <div style="padding: 20px; background-color: #F2F2F2;height:100%;">
		                <div class="layui-row layui-col-space15">
		                    <div class="layui-col-md6">
		                        <div class="layui-card">
		                            <div class="layui-card-header">模块菜单树</div>
		                            <div class="layui-card-body" id="toolbarDiv">
		                                <ul id="test1" class="dtree" data-id="0"></ul>
		                            </div>
		                        </div>
		                    </div>
		                </div>
		            </div>
		        </div>
		    </div>
		
	</body>
	<script>
		//声明全局属性
		var globalUrl = window.localStorage.getItem("globalUrl");
		var token = window.localStorage.getItem("token");
		var treeObj,index,uindex;
		
		$(function(){
			layui.use(['tree', 'util'], function(){
				var tree = layui.tree;
				var layer = layui.layer;
				var util = layui.util;
			
			$.post('/api/GetAllModuleLayUI',{
				token:token
			},function(treelist){
				//console.log(treelist);
				//常规用法
				treeObj=tree.render({
					elem: '#test1' //默认是点击节点可进行收缩
					,edit:['add', 'update', 'del']
					,accordion:true
					,data: treelist
					,operate: function(obj){
					    var type = obj.type; //得到操作类型：add、edit、del
					    var data = obj.data; //得到当前节点的数据
					    var elem = obj.elem; //得到当前节点元素
					    
					    //Ajax 操作
					    var id = data.id; //得到节点索引
						var title = data.title; //得到模块名称
						var href = data.href; //得到模块路径
					    if(type === 'add'){ //增加节点
							//console.log(data.id);
							$("#addParentId").val(data.id);
							treeObj.reload();
								index = layer.open({
									type:1
									,title:"添加模块信息"
									,content:$("#addModuleTree")
									,offset: 't'
									,area:["369px","330px"]
							})
							
					    } else if(type === 'update'){ //修改节点
					        console.log(id);
							$.post('/api/GetModuleById',{
								id:id,
								token:token
							},function(parent){
								//console.log()
								//把message获取到的json字符串转换为json对象
								var parentId = JSON.parse(parent.message).parentId;//父节点ID
								var weight = JSON.parse(parent.message).weight;//权重
								//console.log("修改");
								layer.confirm('确认修改吗？',function(index){
									$.post(globalUrl+'/api/UpdateModule',{
										mId:id,
										name:title,
										parentId:parentId,
										path:href,
										weight:weight,
										token:token
									},function(res){
										if(res.success){
											layer.msg("修改成功",{icon: 1});
											treeObj.reload();
										}else{
											layer.msg("修改失败",{icon: 2});
											treeObj.reload();
										}
									},'json')
								  })
								
							},'json');
							
					    } else if(type === 'del'){ //删除节点
							//console.log("删除");
								$.post('	/api/DeleteModule',{
									mId:id,
									token:token
								},function(res){
									if(res.success){
										layer.msg("删除成功",{icon: 1});
										tableObj.reload();
									}else{
										layer.msg("删除失败",{icon: 2});
										tableObj.reload();
									}
								},"json");
					    };
					  }
				});
			},'json');
			});
		})
		//点击添加保存按钮
		function saveAddModules(){
			var addParentId = $("#addParentId").val();
			var addname = $("#addname").val();
			var addpath = $("#addpath").val();
			var addweight = $("#addweight").val();
			if(addname==""){
				layer.msg("模块名不能为空");
			}else if(addpath==""){
				layer.msg("模块路径不能为空");
			}else if(addweight==""){
				layer.msg("模块权重不能为空");
			}else{
				$.post('/api/CreateModule',{
					name:addname,
					parentId:addParentId,
					path:addpath,
					weight:addweight,
					token:token
				},function(res){
					if(res.success){
						layer.msg("添加成功",{icon: 1},function(){
							//关闭窗体
							layer.close(index);
							//清空表单数据
							$("#my_question")[0].reset();
							//添加后刷新树形图
							window.location.reload();
						});
					}else{
						layer.msg("添加失败",{icon: 2},function(){
							window.location.reload();
						});
					}
				},'json');
				
			}
			
		}
	</script>
</html>

